<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['库存管理', '仓库管理']" currentMenu="仓库详情"> </crumbs>
    <div class="uni-card">
      <div class="bd-line"></div>
      <div class="item-wrap">
        <div class="detail-item" style="width: 20%">
          <p class="subtitle">仓库编号</p>
          <p class="secondary-text">{{ detailInfo.applyNumber || '-' }}</p>
        </div>
        <div class="detail-item" style="width: 20%">
          <p class="subtitle">仓库名称</p>
          <p class="secondary-text">{{ detailInfo.warehouseName || '-' }}</p>
        </div>
        <div class="detail-item" style="width: 20%">
          <p class="subtitle">分类</p>
          <p class="secondary-text">{{ detailInfo.warehouseTypeTxt || '-' }}</p>
        </div>
        <div class="detail-item" style="width: auto">
          <flow-status
            ids="WMS_WAREHOUSE"
            :flowStatusText="detailInfo.flowStatusTxt"
            :formStatusText="detailInfo.statusTxt"
            :flowStatus="detailInfo.flowStatus"
          ></flow-status>
        </div>
      </div>
    </div>
    <div class="uni-card" style="margin:14px 0 0">
      <div class="item-wrap">
        <div class="detail-item" style="width: 20%">
          <p class="subtitle">仓库管理员</p>
          <p class="secondary-text">{{ detailInfo.administerUserName || '-' }}</p>
        </div>
        <div class="detail-item" style="width: 20%"></div>
        <div class="detail-item" style="width: 20%"></div>
        <div class="detail-item" style="width: auto">
        </div>
      </div>
    </div>
    <div style="padding: 12px">
      <Examine  v-if="detailInfo.flowInstId" type="2" :id="detailInfo.flowInstId" ref="examine" />
    </div>
    <div class="cards-box"></div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import { returnMaterialQueryById } from '@/api/goodsManagement'
import { API } from '@/api/requestFzs'
import { APILX } from '@/api/requestLx'
import Examine from '@/components/examine'
import FlowStatus from '@/pubComponent/FlowStatus'
export default {
  data() {
    return {
      jkeForm: {
        title: '仓库详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      flowStatusEn: '',
      detailInfo: {},
      flowStatus: {
        RUNNING: { text: '审批中', color: '#FF943E' },
        REFUSE: { text: '已拒绝', color: '#FF4D4F' },
        CANCELED: { text: '已撤回', color: '#888888' },
        AGREE: { text: '已通过', color: '#00B042' },
        TERMINATED: { text: '已终止', color: '#FF4D4F' },
      },
    }
  },
  components: {
    crumbs,
    FlowStatus,
    Examine,
  },
  methods: {
    setFlowStatus(v) {
      //根据状态文字返回flowStatus中对应英文
      if (v == '审批中') {
        return 'RUNNING'
      }
      if (v == '审批拒绝') {
        return 'REFUSE'
      }
      if (v == '取消') {
        return 'CANCELED'
      }
      if (v == '审批通过') {
        return 'AGREE'
      }
      if (v == '已撤回') {
        return 'TERMINATED'
      }
    },
    setColor(s) {
      let cor = {
        1: '#888888',
        2: '#1890FF',
        3: '#00B042',
        REFUSE: '#888888',
        TERMINATED: '#888888',
        RUNNING: '#1890FF',
        AGREE: '#00B042',
      }
      return cor[s] || ''
    },
    /* 面包屑返回 */
    goBack() {
      //返回列表页
      this.jkeForm.visible = false
    },
    initDetail(id) {
      this.jkeForm.visible = true
      APILX.wmsWarehouseQueryById(id).then((res) => {
        if (res.code == 200) {
          this.detailInfo = res.result
          this.flowStatusEn = this.setFlowStatus(res.result.flowStatus)
          let v = res.result.flowStatus
          if (v == '审批中') {
            this.flowStatusEn = 'RUNNING'
          } else if (v == '审批拒绝') {
            this.flowStatusEn = 'REFUSE'
          } else if (v == '取消') {
            this.flowStatusEn = 'CANCELED'
          } else if (v == '审批通过') {
            this.flowStatusEn = 'AGREE'
          } else if (v == '已撤回') {
            this.flowStatusEn = 'TERMINATED'
          }
        } else {
          this.$antdMessage.error(res.result)
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
// .item-wrap:nth-of-type(n + 2) {
//   margin-top: 40px;
// }
.detail-item {
  width: 30%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 205px);
  overflow-y: scroll;
}
</style>
